<template>
  <!-- 分类参数页面 -->
  <div class="com-page">
    <el-card>
      <el-alert
        show-icon
        title="注意：只允许为第三级分类设置相关参数！"
        type="warning"
        :closable="false"
      >
      </el-alert>
      <el-row>
        <el-col>
          <span>选择商品分类：</span>
          <!-- 级联选择器 -->
          <el-cascader
            expand-trigger="hover"
            :options="options"
            v-model="selectedOptions"
            :props="cascaderProps"
            @change="handleChangeCascader"
            clearable
          >
          </el-cascader>
        </el-col>
      </el-row>
      <!-- 标签页 -->
      <ParamsTab
        :selectedOptions="selectedOptions"
        ref="ParamsTabRef"
      ></ParamsTab>
    </el-card>
  </div>
</template>

<script>
import { request } from "@/utils";
import ParamsTab from "@/components/paramsTab";
export default {
  components: { ParamsTab },
  props: {},
  data() {
    return {
      options: [],
      cascaderProps: {
        label: "cat_name",
        children: "children",
        value: "cat_id",
      },
      selectedOptions: [],
      cateId: 90,
    };
  },
  watch: {},
  computed: {},
  methods: {
    async getCateData() {
      const { data: ret } = await request.get("categories");
      this.options = ret.data;
    },
    handleChangeCascader() {
      // 判断是否为三级分类
      if (this.selectedOptions.length == 3) {
        this.cateId = this.selectedOptions[this.selectedOptions.length - 1];
        // 发起请求 指定为动态参数
        this.$refs.ParamsTabRef.getData("many", this.cateId);
        return;
      }
      this.selectedOptions = [];
      this.$message.warning("请选择第三级分类标签");
    },
  },
  created() {
    this.getCateData();
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.el-row {
  margin: 20px 0;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-cascader {
  width: 280px;
}
</style>